<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入本项目样式 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
<div id="container">
<!--    el开头的就是element-ul提供的组件-->
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
            <el-input v-model.number="ruleForm.age"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
    </el-form>
</div>




<!--引入vue的js文件-->
<script src="js/vue.2.7.14.js"></script>

<!-- 引入组件库 -->
<script src="js/index.js"></script>



</body>
<script>


    let validatePass2 = (rule, value, callback)=> {
        console.log(this)
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.$vm.ruleForm.pass) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    }

    let checkAge = (rule, value, callback) => {
        console.log(this)
        if (!value) {
            callback(new Error('年龄不能为空'));
            return
        }
        if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
        } else {
            if (value < 0) {
                callback(new Error('年龄不对'));
            } else {
                callback();
            }
        }
    }
    // 实例化 Vue
    var vm = new Vue({
        // 指定挂载节点
        el: "#container",
        // 声明并初始化 Vue 实例的成员变量
        data: {
            ruleForm: {
                pass: '',
                checkPass: '',
                age: ''
            },
            rules: {
                pass: [
                    {  min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur'  },
                    {   message: '密码不能为空', trigger: 'blur' , required:true },
                ],
                checkPass: [
                    {trigger: 'blur', validator: validatePass2}
                ],
                age: [
                    {trigger: 'blur', validator: checkAge}
                ]
            }
        },
        // 定义 Vue 实例的成员方法
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    });
</script>

</html>